<template>
  <q-page class="q-pa-md" v-loading="loading">
    <div class="deployDetailTitle">
      <q-breadcrumbs class="q-mb-md">
        <el-icon style="cursor: pointer" @click="router.go(-1)">
          <ArrowLeft />
        </el-icon>
        <q-breadcrumbs-el label="模型详情" />
      </q-breadcrumbs>
      <div class="buttons">
        <el-button round :size="'small'">修改</el-button>
        <el-button round :size="'small'">启动</el-button>
        <el-button round :size="'small'">停止</el-button>
        <el-button round :size="'small'">删除</el-button>
      </div>
    </div>
    <div class="deployDetailInfo">
      <div class="container">
        <p class="title">基本信息</p>
        <div class="dataBox">
          <div class="row">
            <div class="col flexR">
              <span class="name">名称</span>
              <p>{{ modelInfoData.title }}</p>
            </div>
          </div>
          <div class="row">
            <div class="col flexR" :span="8">
              <span class="name">状态</span>
              <p>{{ modelInfoData.status === 'stopped' ? '停止' : '启动' }}</p>
            </div>
            <div class="col flexR" :span="4">
              <span class="name">来源</span>
              <p>我的部署</p>
            </div>
          </div>
          <div class="row">
            <div class="col flexR" :span="10">
              <span class="name">调用失败次数/总次数</span>
              <p>{{ modelInfoData.stop_in_seconds }}/6</p>
            </div>
            <div class="col flexR" :span="2">
              <span class="name">描述</span>
              <p>
                {{ modelInfoData.description }}
                <el-icon v-if="detailData.title.length > 0"
                  ><EditPen
                /></el-icon>
                <q-popup-edit
                  v-model="descriptionModel"
                  v-slot="scope"
                  @hide="setDescription(descriptionModel)"
                >
                  <q-input
                    v-model="scope.value"
                    dense
                    autofocus
                    counter
                    @update:model-value="changeInput(scope.value)"
                    @keyup.enter="setDescription(scope.value)"
                  />
                </q-popup-edit>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="deployContent">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="tabClick">
        <el-tab-pane
          label="调用指南"
          name="parameter"
          class="parameter"
          style="overflow: auto"
        >
          <!--参数配置 start-->
          <div style="background-color: rgb(243, 245, 252); padding: 10px">
            <p class="parameter_tit">参数配置</p>
            <div class="parameter_context input">
              <p style="font-size: 12px; margin-bottom: 0">输入参数</p>
              <el-table
                class="parameter_table"
                :data="parameter_input"
                style="width: 100%"
              >
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="type" label="类型" />
              </el-table>
            </div>
            <div class="parameter_context output">
              <p style="margin-bottom: 0">输出参数</p>
              <el-table
                class="parameter_table"
                :data="parameter_output"
                style="width: 100%"
              >
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="type" label="类型" />
              </el-table>
            </div>
          </div>
          <!--App认证 start-->
          <appAuthentication></appAuthentication>
        </el-tab-pane>

        <!--        <el-tab-pane  label="预测" name="predict" class="predict">-->
        <!--          <div class="predictBox">-->
        <!--            <div class="selectPicture">-->
        <!--              <div class="selectPicture_bgColor"></div>-->
        <!--              <p class="selectContext">选择预测文件图片文件</p>-->
        <!--              <el-upload-->
        <!--                v-model:file-list="fileList"-->
        <!--                :class="'upload_wrapper ' + (hideUpload ? 'hide' : '')"-->
        <!--                list-type="picture-card"-->
        <!--                :limit="2"-->
        <!--                on-success='handleUploadSuccess'-->
        <!--                :on-change="fileChange"-->
        <!--                :auto-upload="false"-->
        <!--              >-->
        <!--                <span>选择文件</span>-->
        <!--                <template #file="{ file }">-->
        <!--                  <div>-->
        <!--                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt />-->
        <!--                  </div>-->
        <!--                </template>-->
        <!--              </el-upload>-->
        <!--              <p class="noSelect" :title="upLoadFileName">{{upLoadFileName?upLoadFileName:'未选择任何文件'}}</p>-->
        <!--              <el-button type="primary" size="small" plain class="predictionBtn" @click="predictionBtnClick">{{isPredictionBtnClick?'重新预测':'预测'}}</el-button>-->
        <!--            </div>-->
        <!--            <div class="resultBox" v-if="predictionResult">-->
        <!--              <p class="resultBox_text">预测结果显示</p>-->
        <!--              <div class="resultSuccess">-->
        <!--                <q-badge rounded color="blue" label="i" style="margin-right: 3px" />-->
        <!--                预测成功-->
        <!--              </div>-->
        <!--              <pre class="pres" v-predict><code>{{JSON.stringify([{name:'hhc', age:19},{name:'hhc', age:19},{name:'hhc', age:19}],null,2)}}</code></pre>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </el-tab-pane>-->
        <el-tab-pane
          label="配置更新记录"
          name="configurationUpdate"
          class="configurationUpdate"
        >
          <p class="configurationUpdate_title">当前配置</p>
          <el-table
            :header-cell-style="{
              'text-align': 'center',
              'font-size': '12px',
              background: 'rgb(232,232,232)',
              color: '#000',
              border: '1px solid rgb(232,232,232)',
            }"
            :cell-style="{
              'text-align': 'center',
              border: '1px solid rgb(232,232,232)',
              'font-size': '12px',
            }"
            :data="configurationUpdate"
            style="width: 100%"
          >
            <el-table-column prop="repository_model_title" label="模型应用名称" />
            <el-table-column prop="repository_model_version_number" label="版本" />
            <el-table-column prop="source" label="计算资源规格" >
              <template #default="scope">
                <span>cpu:{{scope.row.cpu}} gpu:{{scope.row.gpu}} 内存:{{scope.row.memory}}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane
          label="监控信息"
          name="monitoringInformation"
          class="monitoringInformation"
        >
          <p style="margin-left: 12px; color: rgb(71, 76, 88); font-size: 16px">
            model-bdc6 0.02
          </p>
          <p style="margin-left: 12px; color: rgb(76, 80, 92); font-size: 12px">
            资源统计信息
          </p>
          <div class="container">
            <div class="echarts">
              <div class="graph">
                <chart-line
                  :chartOption="chartOption1"
                  :chartSize="chastSize1"
                ></chart-line>
              </div>
              <div class="graph">
                <chart-line
                  :chartOption="chartOption2"
                  :chartSize="chastSize2"
                ></chart-line>
              </div>
              <div class="graph">
                <chart-line
                  :chartOption="chartOption3"
                  :chartSize="chastSize3"
                ></chart-line>
              </div>
            </div>
            <div class="monitInfoContent">
              <div style="display: flex; justify-content: center">
                <p style="margin-right: 15px">AI应用调用次数统计</p>
                <el-tooltip
                  class="box-item"
                  effect="light "
                  placement="right-start"
                >
                  <el-button
                    style="
                      transform: scale(0.75);
                      transform-origin: left;
                      margin: 0 0 0 -10px;
                      font-size: 18px;
                      color: #333;
                      border-color: #333;
                    "
                    size="small"
                    circle
                    >?
                  </el-button>
                </el-tooltip>
              </div>
              <div style="display: flex; justify-content: center">
                <span style="font-size: 26px; color: red">{{ monitorInfoData?monitorInfoData['call_failed_count']:0 }}</span
                ><span style="margin-top: 12px">/{{monitorInfoData?monitorInfoData['call_count']:0}}</span>
              </div>
              <p style="text-align: center; margin-top: 10px">失败调用的次数</p>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="事件" name="event" class="event">
          <el-table
            :header-cell-style="{
              'text-align': 'left',
              'font-size': '12px',
              background: 'rgb(243,245,251)',
              color: 'rgb(104,109,121)',
              border: '1px solid rgb(232,232,232)',
            }"
            :cell-style="{
              'text-align': 'left',
              color: 'rgb(104,109,121)',
              background: 'rgb(255,255,255)',
              'font-size': '12px',
            }"
            :data="eventData"
            style="width: 100%"
          >
            <el-table-column prop="eventType" label="事件类型" width="100">
              <template #default="scope">
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <el-icon
                    style="
                      color: #87e226;
                      vertical-align: middle;
                      margin-right: 5px;
                      font-size: 20px;
                    "
                  >
                    <CircleCheckFilled />
                  </el-icon>
                  {{ scope.row.type === 'normal' ? '正常' : '' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="message" label="事件信息" />
            <el-table-column prop="happen_count" label="发生次数" width="100" />
            <el-table-column
              prop="first_happen_time"
              label="首次发生时间"
              width="200"
            />
          </el-table>
        </el-tab-pane>
        <!--<el-tab-pane label="标签" name="six"></el-tab-pane>-->
      </el-tabs>
    </div>
  </q-page>
</template>
<script setup lang="ts">
import { ref, shallowRef, reactive } from 'vue';
import { useRouter } from 'vue-router';
import {
  getConfigurationUpdateHandle, //配置更新界面
  getModelDevelopHandle, //模型详情接口
  putAlgDetailData, //描述修改接口
  getEventDataListHandle, //事件界面
  getApiEndpointHandle, //获取模型部署调用指南
  getMonitorInfo, //获取模型部署监控信息
} from 'src/api/model';
import { modelStore } from 'stores/model';
import type { TabsPaneContext } from 'element-plus';
import appAuthentication from './appAuthentication.vue'; //app认证页面
import chartLine from 'src/components/chartLine.vue';
//echart图表组件

const router = useRouter();
const projectId = router.currentRoute.value.params.project_id;
const loading = ref(false);

//详情
const modelId = modelStore().model_id;
const stop = ref(3);
const descriptionModel = ref();
const detailData = shallowRef({
  title: '测试测试',
  description: '',
});
let modelInfoData = ref({}); //模型详情数据

getModelDevelop(); //获取模型详情

function setDescription(str: string) {
  putAlgDetailData(projectId, modelId, { description: str })
    .then((res: any) => {
      getModelDevelop(); //获取模型详情
    })
    .catch((error) => {
      console.log(error);
    });
}
function changeInput(str: string) {
  descriptionModel.value = str;
}

//内容
const activeName = ref('parameter');
const predictionResult = ref(false);

//模型详情
function getModelDevelop() {
  getModelDevelopHandle(projectId, modelId).then((res: any) => {
    modelInfoData.value = res.data;
  });
}

//调用指南 start
//调用指南-参数配置-输入参数内容
const parameter_input = ref([
  {
    name: 'images',
    type: 'file',
  },
]);
//调用指南-参数配置-输出参数内容
const parameter_output = ref([
  {
    name: 'predicted_label',
    type: 'string',
  },
  {
    name: 'scores',
    type: 'string',
  },
]);
getApiEndpoint(); //获取模型部署调用指南
function getApiEndpoint() {
  getApiEndpointHandle(projectId, modelId).then((res: any) => {
    parameter_input.value = res.data.input;
    parameter_output.value = res.data.output;
    modelStore().setApiEndpoint(res.data);
  });
}
//调用指南 end

//预测
//预测 start
const fileList = ref([]); // 图片列表
const upLoadFileName = ref('');
const hideUpload = ref(false); // 是否隐藏上传按钮
// 重新上传图片把上一张图片删除 顺便把文件名称显示
function fileChange(file: any, fileList: any[]) {
  const { name } = file;
  upLoadFileName.value = name;

  if (fileList.length > 1) {
    fileList.shift();
  }
}
const isPredictionBtnClick = ref(false);
//预测按钮点击
const predictionBtnClick = () => {
  isPredictionBtnClick.value = true;
  predictionResult.value = true;
};

const vPredict = {
  mounted: (el: HTMLElement) => {
    let blocks = el.querySelectorAll('pre code');
    blocks.forEach((block) => {
      let ul = document.createElement('ul');
      let rowCount = block.outerHTML.split('\n').length;
      for (let i = 1; i <= rowCount; i++) {
        let li = document.createElement('li');
        let text = document.createTextNode(i);
        li.className = 'li-numbering';
        li.appendChild(text);
        ul.appendChild(li);
      }
      ul.className = 'pre-numbering';
      block.parentNode.appendChild(ul);
    });
  },
};
//预测 end

//配置更新记录 start
//配置更新记录-表格数据
const configurationUpdate = ref([
  {
    modelAppName: 'model-bdc6',
    type: '2',
    source: 'CPU: 2核8GB',
  },
]);
//配置更新记录 end

//事件 start
//事件-表格数据
const eventData = ref([
  {
    eventType: '正常',
    eventInfo: '123123123123123123123123123123123123123',
    eventNumbers: '2',
    firstOccurrence: '2023/06/20 15:55:13',
  },
]);
//事件 end

//监控信息 start

const monitorInfoData = ref(null);//监控信息数据
//第一个图标参数配置
const chastSize1 = reactive({
  width: '300px',
  height: '110px',
});
const chartOption1 = ref({
  title: {
    text: 'CPU',
    left: 'right',
    textStyle: {
      color: '#666666',
      fontSize: 16,
      fontWight: 200,
    },
  },
  color: ['#6BC9A8', '#D9D9D9'],
  legend: {
    type: 'scroll',
    orient: 'vertical',
    show: true,
    right: 0,
    top: 50,
    width: 50,
    bottom: 20,
    textStyle: {
      fontSize: 7,
    },
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      silent: 'ture',
      label: {
        normal: {
          fontSize: '12',
          position: 'center',
          color: '#000',
          formatter: function () {
            return '1.5%';
          },
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold',
        },
      },
      data: [
        { value: 0.03, name: '已用' },
        { value: 1.97, name: '可用' },
      ],
    },
  ],
});

//第二个图标参数配置
const chastSize2 = reactive({
  width: '300px',
  height: '110px',
});
const chartOption2 = ref({
  title: {
    text: '内存',
    left: 'right',
    textStyle: {
      color: '#666666',
      fontSize: 16,
    },
  },
  color: ['#6BC9A8', '#D9D9D9'],
  legend: {
    type: 'scroll',
    orient: 'vertical',
    show: true,
    right: 0,
    top: 50,
    width: 50,
    bottom: 20,
    textStyle: {
      fontSize: 7,
    },
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '80%'],
      label: {
        normal: {
          fontSize: '12',
          position: 'center',
          color: '#000',
          formatter: function () {
            return '24.93%';
          },
        },
      },
      silent: 'ture',
      labelLine: {
        normal: {
          show: false,
        },
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold',
        },
      },
      data: [
        { value: 0, name: '已用' },
        { value: 0, name: '可用' },
      ],
    },
  ],
});

//第三个图标参数配置
const chastSize3 = reactive({
  width: '300px',
  height: '110px',
});
const chartOption3 = ref({
  title: {
    text: 'GPU',
    left: 'right',
    textStyle: {
      color: '#666666',
      fontSize: 16,
    },
  },
  color: ['#6BC9A8', '#D9D9D9'],
  legend: {
    type: 'scroll',
    orient: 'vertical',
    show: true,
    right: 0,
    top: 50,
    width: 50,
    bottom: 20,
    textStyle: {
      fontSize: 7,
    },
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      label: {
        normal: {
          fontSize: '12',
          position: 'center',
          color: '#000',
          formatter: function () {
            return '0%';
          },
        },
      },
      silent: 'ture',
      labelLine: {
        normal: {
          show: false,
        },
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold',
        },
      },
      data: [
        { value: 0.0, name: '已用' },
        { value: 0.0, name: '可用' },
      ],
    },
  ],
});

//监控信息 end



//全局页面tab切换事件
const tabClick = (tab: TabsPaneContext, event: Event) => {
  let tabData: any = JSON.parse(JSON.stringify(tab));
  if (tabData.props.label === '事件') {
    getEventDataListHandle(projectId, modelId).then((res: any) => {
      eventData.value = res.data;
    });
  }
  if (tabData.props.label === '配置更新记录') {
    getConfigurationUpdateHandle(projectId, modelId).then((res: any) => {
      configurationUpdate.value = res.data;
    });
  }
  if( tabData.props.label === '监控信息' ){
    getMonitorInfo(projectId, modelId).then( (res:any) => {
      chartOption1.value.series[0].data[0].value = res.data.cpu_used;
      chartOption1.value.series[0].data[1].value = res.data.cpu_available;
      chartOption2.value.series[0].data[0].value = res.data.memory_used;
      chartOption2.value.series[0].data[1].value = res.data.memory_available;
      chartOption3.value.series[0].data[0].value = res.data.gpu_used;
      chartOption3.value.series[0].data[1].value = res.data.gpu_available;
      monitorInfoData.value = res.data;
    })
  }
};
</script>
<style scoped lang="scss">
.deployDetailTitle {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 45px;
  line-height: 40px;
  border-bottom: 1px dashed #ccc;
  .el-icon,
  .q-breadcrumbs__el {
    color: #1d1d1d;
  }
}

.deployDetailInfo {
  .container {
    padding: 5px 0 0 10px;
    font-size: 12px;
    .title {
      color: #1d1d1d;
      font-weight: bold;
      margin-bottom: 6px;
    }
    .dataBox {
      .row {
        .flexR {
          display: flex;
          flex-direction: row;
          .name {
            width: 200px;
          }
        }
        i {
          font-style: initial;
          color: #333333;
        }
      }
      .name {
        color: #5c5858;
      }
    }
  }
  .el-radio {
    ::v-deep .el-radio__inner {
      border-color: rgb(153, 153, 153) !important;
      background-color: rgb(153, 153, 153) !important;
    }
    ::v-deep .el-radio__label {
      font-size: 12px;
      color: rgb(153, 153, 153) !important;
    }
  }
}

.deployContent {
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
  .el-tab-pane {
    width: 100%;
  }

  //调用指南 start
  .parameter {
    .parameter_tit {
      font-size: 12px;
      color: #1d1d1d;
      font-weight: 600;
      margin-bottom: 5px;
    }
    .parameter_context {
      background-color: #fff;
      p {
        padding-left: 10px;
        padding-top: 10px;
        font-size: 12px;
        color: #1d1d1d;
        font-weight: bold;
      }
      .parameter_table {
        font-size: 12px;
      }
    }
    .output {
      margin-top: 10px;
    }
  }
  //调用指南 end

  //预测 start
  .predict {
    position: relative;
    .predictBox {
      display: flex;
      .selectPicture {
        display: flex;
        .selectPicture_bgColor {
          position: absolute;
          width: 100%;
          height: 40px;
          background-color: rgb(243, 245, 252);
        }
        .selectContext {
          position: relative;
          left: 10px;
          color: rgb(85, 85, 85);
          font-weight: bold;
          font-size: 12px;
          height: 40px;
          line-height: 40px;
          margin-bottom: 0;
          margin-right: 5px;
        }
        .noSelect {
          position: fixed;
          left: 460px;
          cursor: pointer;
          font-size: 13px;
          color: rgb(85, 85, 85);
          height: 40px;
          line-height: 40px;
          margin-bottom: 0;
          width: 220px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
        .predictionBtn {
          position: fixed;
          top: 320px;
          left: 700px;
        }
      }
      .resultBox {
        max-width: 300px;
        margin-top: 50px;
        .resultBox_text {
          color: rgb(85, 85, 85);
          font-size: 12px;
          margin-bottom: 5px;
        }
        .resultSuccess {
          width: 250px;
          height: 40px;
          padding-left: 10px;
          line-height: 40px;
          font-size: 12px;
          background-color: rgb(230, 247, 255);
          border-radius: 5px;
          border: 1px solid rgb(145, 213, 255);
        }
      }
    }
    ::v-deep .el-upload-list {
      height: 300px;
    }
    ::v-deep .el-upload--picture-card {
      width: 60px;
      height: 20px;
      color: #1d1d1d;
      font-weight: bold;
      border-radius: 0;
      line-height: 50px;
      font-size: 12px;
      border: 1px solid rgb(118, 118, 118);
      margin-top: 5px;
      background-color: rgb(239, 239, 239);
    }
    ::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
      object-fit: cover !important;
    }
    ::v-deep .el-upload-list__item {
      position: relative;
      top: 65px;
      left: -140px;
      width: 230px;
      height: 230px;
    }
    ::v-deep .el-upload--picture-card {
      position: fixed;
      top: 316px;
      margin-left: 15px;
    }
  }
  //预测 end

  //配置更新记录 start
  .configurationUpdate {
    .configurationUpdate_title {
      margin-top: 10px;
      padding-left: 10px;
      color: rgb(16, 16, 16);
    }
  }
  //配置更新记录 start

  //监控信息 start
  .monitoringInformation {
    .container,
    .echarts {
      display: flex;
      flex-direction: row;
    }
    .container {
      justify-content: space-between;
    }
    .echarts {
      .graph {
        width: 33%;
      }
    }
    .monitInfoContent {
      display: flex;
      flex-direction: column;
      width: 250px;
      padding-left: 20px;
      border-left: 1px dashed;
    }
  }
  //监控信息 end

  ::v-deep .el-tabs__item {
    font-size: 13px !important;
  }
  .pres {
    position: relative;
    top: 5px;
    background-color: rgb(255, 255, 255);
    color: #0aba12;
    padding-left: 50px;
    height: 210px;
    overflow: auto;
    .btn-copy {
      display: none;
      position: absolute;
      right: 10px;
      top: 10px;
    }
    &:hover {
      .btn-copy {
        display: block;
        cursor: pointer;
      }
    }
    &::-webkit-scrollbar {
      width: 5px;
      height: 5px;
      background: rgba(0, 0, 0, 0.1); /*可以设置轨道颜色*/
      padding-right: 2px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.1);
      border-radius: 1px;
    }
  }
  ::v-deep .pre-numbering {
    position: absolute;
    padding-left: 0;
    top: -8px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 20px;
    text-align: center;
    padding-top: 8px;
    background-color: rgb(247, 247, 247);
    .li-numbering {
      list-style: none;
      color: #0aba12;
    }
  }
}
</style>
